<template>
    <div class="h-footer">
        <div class="footer-wrap">
            <ul class="con">
                <li class="contact">联系我们</li>
                <li class="phone">电话：1344444444</li>
                <li class="address">地址：深圳市宝安区互联网基地A区</li>
                <li class="text">粤ICP备19055329号 深圳市星际教育科技有限公司 版权所有</li>
            </ul>
            <ul class="items">
                <div class="item">
                    <div class="qr-code">
                        <img class="qr-icon" src="../../public/images/logo-ico.png" alt="">
                        <span class="qr-text">扫码关注公众号</span>
                    </div>
                    <img class="wx-ico" src="../../public/images/logo-ico.png" alt="">
                    <p class="wx-text">官方公众号</p>
                </div>
                <div class="item">
                    <div class="qr-code">
                        <img class="qr-icon" src="../../public/images/logo-ico.png" alt="">
                        <span class="qr-text">扫码关注小程序</span>
                    </div>
                    <img class="wx-ico" src="../../public/images/logo-ico.png" alt="">
                    <p class="wx-text">官方小程序</p>
                </div>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
    };
</script>
<style scoped lang="scss">
    .h-footer {
        width: 100%;
        margin-top: 135px;
        background: #252D44;
        color: #fff;
        .footer-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            min-width: 320px;
            padding: 0 .3rem;
            margin: 0 auto;
            .con {
                height: 178px;
                padding: 40px 0 25px;
                .contact {
                    margin-bottom: 10px;
                    font-size: 18px;
                }
                .phone,
                .address {
                    opacity: .7;
                    font-size: 14px;
                }
                .text {
                    margin-top: 10px;
                    opacity: 1;
                    font-size: 14px;
                }
            }
            .items {
                display: flex;
                height: 178px;
                font-size: 12px;
                .item {
                    position: relative;
                    width: 103px;
                    height: 100%;
                    margin-right: 10px;
                }
                .qr-code {
                    position: absolute;
                    top: -43px;
                    left: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    height: 118px;
                    border-radius: 10px;
                    box-shadow: 0 0 17px rgba(0, 0, 0, 0.16);
                    background: #fff;
                    color: #646464;
                    img {
                        width: 93px;
                        height: 93px;
                        margin-top: 4px;
                    }
                }
                .wx-ico {
                    position: absolute;
                    top: 85px;
                    left: 29px;
                    width: 42px;
                    height: 42px;
                }
                .wx-text {
                    position: absolute;
                    top: 137px;
                    width: 100%;
                    opacity: .7;
                    text-align: center;
                }
            }
        }

    }
</style>
